<template>
  <div id="notice_dialog">
    <!-- 公告弹窗 -->
    <el-dialog
      custom-class="noticeDialog"
      :visible="isShowNoticeDialog"
      center
      :before-close="closeNoticeDialog"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="dialog_title">
        <img
          @click="closeNoticeDialog"
          src="@/assets/images/pc_black/auth/close.png"
        />
      </div>

      <div class="dialog_center">
        <div class="notice_title" @click="gotoNoticeItem(noticeData.id)">
          {{ noticeData.title }}
        </div>
        <div
          class="notice_content"
          v-html="content"
          @click="gotoNoticeItem(noticeData.id)"
        ></div>

        <ul class="notice_pag" v-if="total > 1">
          <li
            :class="{ active_pag: index + 1 === currentPage }"
            v-for="(item, index) in total"
            :key="index"
            @click="changePage(index)"
          ></li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { escapeHTML } from "@/utils";

export default {
  name: "NoticeDialog",
  props: {
    isShowNoticeDialog: {
      default: false,
      type: Boolean,
    },
    total: Number,
    noticeData: Object,
    currentPage: Number,
  },
  computed: {
    content() {
      return escapeHTML(this.noticeData.content ?? "");
    },
  },
  methods: {
    // ------ common ------
    // 切换页码
    changePage(pageIndex) {
      // 避免重复点击发送请求
      if (pageIndex + 1 === this.currentPage) {
        return;
      }
      this.$emit("changePage", pageIndex + 1);
    },
    // 关闭公告弹窗
    closeNoticeDialog() {
      this.$store.commit("closeNoticeDialog");
      window.localStorage.setItem(
        "phone_oldNoticeData",
        JSON.stringify(this.noticeData)
      );
    },

    // ------ goto ------
    // goto notice item page
    gotoNoticeItem(id) {
      this.$router.push({
        path: "/noticeItem",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
#notice_dialog {
  /deep/.noticeDialog {
    position: relative;
    width: 85%;
    min-height: 588px;
    background: #1e2020;
    border-radius: 10px;

    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      margin: 0;
      padding: 0;

      .dialog_title {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        padding: 30px 30px 0 0;

        img {
          width: 26px;
          height: 26px;
          cursor: pointer;
        }
      }
      .dialog_center {
        padding: 30px 30px;

        .notice_title {
          font-size: 34px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 38px;
          text-align: center;
        }

        .notice_content {
          height: 320px;
          font-size: 26px;
          line-height: 36px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-top: 40px;
          overflow: auto;
          word-break: break-all;
          // padding: 0 5px;
          margin-bottom: 50px;
        }

        .notice_pag {
          position: absolute;
          bottom: 40px;
          left: 0;
          width: 100%;
          display: flex;
          justify-content: center;

          li {
            list-style: none;
            width: 24px;
            height: 24px;
            margin: 0 8px;
            border: none;
            transition: all 0.2s ease;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
          }

          .active_pag {
            transform: scale(1.3);
            box-shadow: white 0px 0px 5px;
            background: #00ffb0;
          }
        }

        /* 设置滚动条的样式 */
        // ::-webkit-scrollbar {
        //   width: 6px;
        //   border-radius: 3px;
        //   display: block;
        // }
        // /* 滚动槽 */
        // ::-webkit-scrollbar-track {
        //   border-radius: 10px;
        // }
        // /* 滚动条滑块 */
        // ::-webkit-scrollbar-thumb {
        //   border-radius: 10px;
        //   background: #a0a0a0;
        //   height: 10px;
        // }
      }
    }
  }

  // 遮罩层
  /deep/ .el-dialog__wrapper {
    background: rgba(0, 0, 0, 0.8);
  }
}
</style>
